import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
import {HttpService} from '@kylin/http';
import {NzInputDirective, NzMessageService} from 'ng-zorro-antd';
import {ConfigService} from '@kylin/config';

@Component({
    selector: 'kylin-data-set',
    templateUrl: './data-set.component.html',
    styleUrls: ['./data-set.component.less']
})
export class DataSetComponent implements OnInit {

    dataSet: Array<any>;

    companyName: string;
    setName: string;

    listLoading: boolean;
    size = 10;
    total: number;
    current = 1;

    editId = null;
    editSet = null;
    fileHost = ''; // TODO 配置文件服务地址
    @ViewChild(NzInputDirective, {static: false, read: ElementRef}) inputElement: ElementRef;

    @HostListener('window:click', ['$event'])
    handleClick(e: MouseEvent): void {
        if (this.editId && this.inputElement && this.inputElement.nativeElement !== e.target) {
            this.confirmChange();
        }
    }

    constructor(private http: HttpService, private message: NzMessageService, private config: ConfigService) {
        this.fileHost = config.imgHostname;
    }

    ngOnInit() {
        this.getDataSet();
    }

    getDataSet(params?: any) {
        this.http.get('/layers/layersList', {
            current: this.current,
            size: this.size,
            layersName: this.setName || '',
            organization: this.companyName || '',
            ...params
        }).then(rep => {
            if (rep.resp_code === '10000') {
                const {current, size, total, records} = rep.data;
                this.current = current;
                this.size = size;
                this.total = total;
                this.dataSet = records;
            } else {
                this.message.error('获取数据集列表失败，' + rep.resp_msg);
            }
        })
    }

    downLoadSet(setItem: any) {
        this.http.get(`/layers/loadZip?layersId=${setItem.layersId}&layersName=${setItem.layersName}`).then(rep => {
            if (rep.resp_code === '10000') {
                const url = rep.data;
                if (url) {
                    const eleLink = document.createElement('a');
                    eleLink.setAttribute('target', '_Blank');
                    eleLink.download = '';
                    eleLink.style.display = 'none';
                    eleLink.href = this.fileHost + url; // TODO 拼接URL
                    document.body.appendChild(eleLink);
                    eleLink.click();
                    document.body.removeChild(eleLink);
                } else {
                    this.message.error('下载失败，' + rep.resp_msg);
                }
            } else {
                this.message.error('下载失败，' + rep.resp_msg);
            }
        });

    }

    unbind(setItem: any) {
        this.http.delete('/layers/removeBind', {layersId: setItem.layersId}).then(rep => {
            if (rep.resp_code === '10000') {
                this.message.success('数据集解绑成功');
                this.getDataSet();
            } else {
                this.message.error('数据集解绑失败，' + rep.resp_msg);
            }
        })
    }

    startEdit(setId: string, setItem: any, event: MouseEvent) {
        event.preventDefault();
        event.stopPropagation();
        this.editId = setId;
        this.editSet = setItem;
    }

    confirmChange(arg?: any) {
        if (this.editSet) {
            if (this.editSet.setName.trim()) {
                this.http.put('/layers/updateLayersName', {
                    layersId: this.editId,
                    setName: this.editSet.setName
                }).then(rep => {
                    if (rep['resp_code'] === '10000') {
                        this.message.success('修改地图数据集名称成功');
                        this.editId = null;
                    } else {
                        this.message.error('设置地图数据集名称失败，' + rep['resp_msg']);
                    }
                });
            } else {
                this.message.error('地图数据集名称不可为空');
            }
        }
    }
}
